<template>
  <div class="hello">
    <h4>{{ msg }}</h4>
    <h3>{{$store.state.number}}</h3>
    <!-- <h3>{{number}}</h3> -->

    <button @click="addNumber">添加数字</button>
    <button @click="addNumber2">异步添加数字</button>
    <router-view></router-view>
  </div>
</template>

<script>
// import { mapState } from './store/index';
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  computed: {
    // ...mapState({number:state=>state.number})
  },
  methods: {
    addNumber() {
      this.$store.commit("setNumber",123)
    },
    addNumber2() {
      this.$store.dispatch("syncSetNumber",123)
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

</style>
